﻿<template>
    <full-screen-dialog :title="titleMap[mode]" v-model="visible" :width="1200" destroy-on-close>
        <el-form
            :model="entityObj"
            :rules="rules"
            :disabled="mode == 'Show'"
            ref="dialogForm"
            label-width="100px"
        >
            <el-steps :active="active" align-center finish-status="success">
                <el-step :title="item" description v-for="item in stepList" :key="item.index" />
            </el-steps>

            <el-row style="margin-top: 18px;">
                <el-col :span="6">
                    <el-form-item label-width="120px" label="单据状态:">{{entityObj.statusDesc}}</el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label-width="120px" label="供应商发货状态:">
                        <span
                            v-if="entityObj.status==0 || entityObj.status==1 || entityObj.status==2"
                        >--</span>
                        <span v-else>{{entityObj.sendStatusDesc}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item
                        label-width="120px"
                        label="门店签收状态:"
                    >{{entityObj.status==2||entityObj.status==1?"--":entityObj.taskStatusDesc}}</el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label-width="120px" label="接单金额:">{{entityObj.receiveAmount}}</el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item
                        label-width="120px"
                        label="采购订单编号:"
                    >{{entityObj.purchaseOrderCode}}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="采购单位:">
                        <el-tooltip placement="top">
                            <template #content>
                                联系人: {{entityObj.purchaseUnityRealName}}
                                <br />
                                联系电话:{{entityObj.purchaseUnityMobile}}
                                <br />
                                联系地址:{{entityObj.purchaseUnityAddress}}
                            </template>
                            <span style="color: blue;">{{entityObj.purchaseUnityName}}</span>
                        </el-tooltip>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="供应商:">
                        <el-tooltip placement="top">
                            <template #content>
                                联系人: {{entityObj.supplierRealName}}
                                <br />
                                联系电话:{{entityObj.supplierMobile}}
                                <br />
                                收货地址:{{entityObj.supplierAddress}}
                            </template>
                            <span style="color: blue;">{{entityObj.supplierName}}</span>
                        </el-tooltip>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="关联要货申请:">{{entityObj.applyOrderCode}}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="要货单位:">
                        <el-tooltip placement="top">
                            <template #content>
                                联系人: {{entityObj.realName}}
                                <br />
                                联系电话:{{entityObj.mobile}}
                                <br />
                                收货地址:{{entityObj.address}}
                            </template>
                            <span style="color: blue;">{{entityObj.storeName}}</span>
                        </el-tooltip>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="要货时间:">{{entityObj.applyDate}}</el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="期望到货日期:">{{entityObj.expectedDate}}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="下单人:">{{entityObj.createName}}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="下单时间:">{{entityObj.createTime}}</el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="最后修改人:">{{entityObj.updateName}}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="最后修改时间:">{{entityObj.updateTime}}</el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="下单备注:">{{entityObj.remarks}}</el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="采购清单:">
                        <el-table
                            :data="entityObj.purchaseOrderItems"
                            :border="true"
                            style="width: 100%"
                            :row-class-name="setRowClass"
                            show-summary
                            :summary-method="getSummaries"
                        >
                            <el-table-column label="物料名称" prop="materialName" min-width="180">
                                <template #default="scope">
                                    <div
                                        style="color: #318cf2;"
                                        v-if="scope.row.materialImages && scope.row.materialImages.length > 0"
                                        @click="handlePreview(scope.row) "
                                    >{{scope.row.materialName}}</div>
                                    <div v-else>{{scope.row.materialName}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column label="规格" width="130" prop="materialSpecs"></el-table-column>
                            <el-table-column label="物料类别" width="130" prop="materialTypeName"></el-table-column>
                            <el-table-column label="单位" width="100" prop="unitName"></el-table-column>
                            <el-table-column label="采购单价" width="120" prop="price">
                                <template #default="scope">
                                    <el-input-number
                                        v-model="scope.row.price"
                                        style="width: 100%"
                                        :step="0.01"
                                        controls-position="right"
                                    ></el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column label="下单数量" width="120" prop="qty"></el-table-column>
                            <el-table-column label="金额" width="120" prop="totalAmount">
                                <template #default="scope">{{ scope.row.price * scope.row.qty}}</template>
                            </el-table-column>
                            <el-table-column label="采购模式" width="160" prop="supplierSaleTypeDesc"></el-table-column>
                            <el-table-column label="接单数量" width="160" prop="receiveQty">
                                <template #default="scope">
                                    <span v-if="entityObj.status==0 || entityObj.status==2">/</span>
                                    <span v-else>{{scope.row.receiveQty}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="接单金额" width="160" prop="receiveAmount">
                                <template #default="scope">
                                    <span v-if="entityObj.status==0 || entityObj.status==2">/</span>
                                    <span v-else>{{scope.row.receiveQty*scope.row.price}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="备注" width="160" prop="remarks"></el-table-column>
                        </el-table>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="handleBeforeClose">取 消</el-button>
            <el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
        </template>
        <!-- 预览组件 -->
        <el-image-viewer
            v-if="showImage"
            @close="closeViewer"
            :hide-on-click-modal="true"
            :url-list="srcList"
        />
    </full-screen-dialog>
</template>



<script>
import tool from "@/utils/tool";
export default {
    emits: ["success", "closed"],
    data() {
        return {
            orgType: 2,
            stepList: ["门店已下单", "接单处理中", "已完成"],
            active: 1,
            tableRowClassName: "warning-row",
            tableRowClassName1: "success-row",
            mode: "Add",
            titleMap: {
                Add: "新增",
                Edit: "编辑",
                Show: "查看",
            },
            entityObj: {
                purchaseProtocolId: 0,
                purchaseProtocolCode: "",
                purchaseProtocolName: "",
                status: 1,
                crName: "",
                crDate: "",
                supplier: {},
                protocolDate: [],
                purchaseUnityName: "",
                remarks: "",
                protocolFile: "",
                purchaseProtocolItems: [],
                giveOrderItems: [],
            },
            //预览图片
            previewUrl: [],
            //预览图片列表
            srcList: [],
            showImage: false,
            materialState: false,
            queryList: {},
            visible: false,
            isSaveing: false,
            needSaveFlag: false,

            props: {
                label: "supplierName",
                value: "supplierId",
            },
            materialProps: {
                label: "materialCode",
                value: "materialId",
                items: "materialItems",
            },
            materialTypeTree: [],
            optionsBrand: [],
            optionsUnit: [],
            optionsPurchaseSaleType: [],
            suppliers: [],
            isCollapsed: true, // 初始状态为收起
        };
    },
    computed: {},
    methods: {
        handleBeforeClose() {
            this.$confirm("信息未保存,确定要关闭吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.visible = false;
                })
                .catch(() => {
                    // 用户点击了取消按钮，不执行关闭
                });
        },
        //显示=
        open(mode = "Add") {
            this.mode = mode;
            this.visible = true;
            return this;
        },
        //图片预览
        handlePreview(row) {
            if (!row.materialImages || row.materialImages.length == 0) {
                return;
            }
            this.previewUrl = row.materialImages[0]; // 设置当前预览的图片 URL
            this.srcList = row.materialImages; // 设置预览列表
            this.showImage = true; // 显示 el-image
        },
        closeViewer() {
            this.showImage = false;
        },
        //表单注入数据
        async setData(data) {
            this.stepList = ["已下单", "供应商接单处理中", "已完成"];
            try {
                var returnValue = await this.$API.auth.GetProcessApi.get(
                    `purchase-order/${data.purchaseOrderId}`,
                    {}
                );
                if (returnValue.status == 200) {
                    this.entityObj = { ...returnValue.response };

                    switch (this.entityObj.status) {
                        case 0:
                            this.stepList = ["已下单", "退回"];
                            this.active = 2;
                            break;
                        case 9:
                            this.stepList = ["已下单", "终止"];
                            this.active = 2;
                            break;
                        case 3:
                            this.active = 2;
                            break;
                        case 5:
                            this.active = 3;
                            break;
                        default:
                            this.active = 1;
                            break;
                    }
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
        async initOptions() {
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "base-dictionary/options",
                    { Codes: ["PurchaseSaleType"] }
                );
                if (returnValue.status == 200) {
                    this.optionsPurchaseSaleType = returnValue.response.find(
                        (p) => p.code == "PurchaseSaleType"
                    ).optionsDetails;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
        async submit() {
            this.isSaveing = true;
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "purchase-order/update-price",
                    { ...this.entityObj }
                );
                if (returnValue.status == 200) {
                    this.$message.success("操作成功");
                    this.$emit("fatherMethod");
                    this.isSaveing = false;
                    this.visible = false;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                    this.isSaveing = false;
                }
            } catch (error) {
                this.loading = false;
                this.isSaveing = false;
                return false;
            }
        },
        formatDate(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, "0");
            const day = String(date.getDate()).padStart(2, "0");
            const hours = String(date.getHours()).padStart(2, "0");
            const minutes = String(date.getMinutes()).padStart(2, "0");
            const seconds = String(date.getSeconds()).padStart(2, "0");

            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = "合计";
                    return;
                }

                const values = data.map((item) =>
                    Number(item[column.property])
                );
                if (
                    column.property == "qty" ||
                    column.property == "totalAmount" ||
                    column.property == "deliveryQty"
                ) {
                    if (!values.every((item) => isNaN(item))) {
                        const total = values.reduce((a, b) => a + b, 0);
                        sums[index] = total;
                    }
                } else if (column.property == "deliveryAmt") {
                    var totalAmount = 0;
                    if (this.entityObj.applyOrderItems) {
                        this.entityObj.applyOrderItems.forEach((item) => {
                            totalAmount += item.price * item.deliveryQty;
                        });
                    }
                    sums[index] = totalAmount;
                }
            });
            return sums;
        },
        toggleCollapse() {
            this.isCollapsed = !this.isCollapsed; // 切换展开/收起状态
        },
        setRowClass({ row }) {
            //终止
            if (row.receiveStatus == 9) {
                return "selected-row-color-grey";
            }
            return "";
        },
    },
    async mounted() {
        this.orgType = tool.data.get("USER_INFO").AccountType;
        await this.initOptions();
    },
};
</script>

<style scoped>
.el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
}
.el-table .selected-row-color-grey {
    color: #000000 !important;
    text-decoration: line-through; /* 删除线 */
}
.el-form-item {
    margin-bottom: 8px !important;
}

.collapse-container {
    border-top: 1px solid #f6f6f6;
    border-bottom: 1px solid #f6f6f6;
    padding: 10px 10px 10px 0;
    margin-bottom: 10px;
}

.collapse-header {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    padding: 5px;
    padding-left: 0;
    font-weight: bold;
    font-size: 12px;
}
.collapse-content1 {
    padding: 10px;
    background: #f2f2f2;
}
.icon-img {
    width: 16px;
    height: 10px;
    margin-left: 5px;
}

/* 单元格容器 */
.cell-container {
    position: relative;
    display: inline-block;
}

/* 单元格内容的样式 */
.cell-content {
    padding-left: 20px; /* 确保单元格内容不被飘带遮挡 */
}

/* 飘带的样式 */
.ribbon {
    position: absolute;
    top: 0;
    left: 0;
    background: #ff4d4f;
    color: white;
    padding: 2px 8px;
    border-radius: 2px;
    font-size: 7px;
    font-weight: bold;
    text-align: center;
    transform: rotate(-30deg); /* 使飘带倾斜 */
    white-space: nowrap;
    width: 60px; /* 飘带宽度 */
    height: 100px !important;
    line-height: 1.5; /* 文字垂直居中 */
}

/* 飘带的尖角 */
.ribbon::before {
    content: "";
    position: absolute;
    top: 0;
    left: -20px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #ff4d4f;
}

/* 根据 type 自定义飘带颜色 */
.ribbon-newbie {
    background: #67c23a; /* 新手飘带颜色 */
}

.ribbon-advanced {
    background: #409eff; /* 高级飘带颜色 */
}

.ribbon-expert {
    background: #f56c6c; /* 专家飘带颜色 */
}

/* 文字颜色 */
.ribbon-text {
    color: white;
}
</style>
